<template>
  <div style="width: 1200px;margin: 0 auto">
       <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="showInput"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="accno" label="账号" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="别名" sortable width="180">
      </el-table-column>
      <el-table-column min-width="100px" label="Title">
        <template slot-scope="{row}" >
          <template v-if="row.edit">
            <el-input v-model="row.percent" class="edit-input" size="small" @blur="onInputBlur(row)" @focus="focustest" ref='inputper' />
       
          </template>
          <div v-else  >{{ row.percent }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="moneyone" label="金额1" width="100"> </el-table-column>
      <el-table-column prop="moneytwo" label="金额2" width="100"> </el-table-column>
      <el-table-column prop="moneythree" label="金额3" width="100">
      <template slot-scope="{row}" >
          <span>{{ row.moneythree |emptyPlaceFilter}}</span>
        </template>
       </el-table-column>
      <el-table-column label="选择上下级">
        <template slot-scope="scope">
     
        <el-select v-model="scope.row.level" placeholder="请选择" @change="getlevel">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        
      </template>
      </el-table-column>
          <el-table-column label="选择计算金额列">
        <template slot-scope="scope">
     
        <el-select v-model="scope.row.money" placeholder="请选择" @change="getlevel">
          <el-option
             v-for="item in optionsmoney"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        
      </template>
      </el-table-column>
 <el-table-column  label="交收" width="100"> </el-table-column>
<el-table-column align="center" label="Actions" >
        <template slot-scope="{row}">
          <el-button            
            type="success"
            size="small"
            
            @click="confirmEdit(row)"
          >
            编辑
          </el-button>
        
        </template>
      </el-table-column>
    </el-table>
<el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="Title" prop="title">
          <el-input v-model="temp.percent" />
        </el-form-item>

      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="updateData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      tempInput:9,
      percentInput:false,
      options: [
        {
          value: "上级",
          label: "上级"
        },
        {
          value: "下级",
          label: "下级"
        }
      ],
      optionsmoney: [
        {
          value: "金额1",
          label: "金额1"
        },
        {
          value: "金额2",
          label: "金额2"
        },
        {
          value: "金额3",
          label: "金额3"
        }
      ],
      value: "",
      valuemoney: "",
      tableData: [
        {
          id: 1,
          accno: "a100",
          name: "a100(登1)",
          percent: "5%",
          moneyone: 1000,
          moneytwo: 900,
          moneythree: ''
        },
        {
          id: 2,
          accno: "a200",
          name: "a200(登1)",
          percent: "10%",
          moneyone: 1000,
          moneytwo: 900,
          moneythree: 300
        },
        {
          id: 3,
          accno: "a300",
          name: "a300(登1)",
          percent: "3%",
          moneyone: 1000,
          moneytwo: 900,
          moneythree: 300,
          children: [
            {
              id: 31,
              accno: "a301",
              name: "a301(登2)",
              percent: "2%",
              moneyone: 1000,
              moneytwo: 900,
              moneythree: 300,
              children: [
                {
                  id: 311,
                  accno: "a3011",
                  name: "a3011(登3)",
                  percent: "1%",
                  moneyone: 1000,
                  moneytwo: 900,
                  moneythree: 300
                },
                {
                  id: 321,
                  accno: "a3032",
                  name: "a3032(登3)",
                  percent: "6%",
                  moneyone: 1000,
                  moneytwo: 900,
                  moneythree: 300
                }
              ]
            },
            {
              id: 32,
              accno: "a303",
              name: "a303(登2)",
              percent: "9%",
              moneyone: 1000,
              moneytwo: 900,
              moneythree: 300
            }
          ]
        },
        {
          id: 4,
          accno: "a400",
          name: "a400(登1)",
          percent: "61%",
          moneyone: 1000,
          moneytwo: 900,
          moneythree: 300
        }
      ],
 temp: {

       id: undefined,
                  accno: "",
                  name: "",
                  percent: "",
                  moneyone: undefined,
                  moneytwo: undefined,
                  moneythree: undefined

      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      multipleSelection: []
    };
  },
  mounted(){
    const items = this.tableData
 this.list = items.map(v => {
        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
        v.originalTitle = v.title //  will be used when user click the cancel botton
        return v
      })
  },

  methods: {
showInput(row, column, event){
  console.log('column.label:'+column.label)
if (column.label === 'Title') { // 行中对应的某一个cell
  if(!row.edit)
    row.edit=true
        this.$nextTick(() => {
          this.$refs.inputper.focus()
          //console.log(column.label)
          //debugger
         // event.target.children[0].focus()
        })
      }
    

},
    focustest(){
      console.log('focus()')
    },

     cancelEdit(row) {
      row.title = row.originalTitle
      row.edit = false
      // this.$message({
      //   message: 'The title has been restored to the original value',
      //   type: 'warning'
      // })
    },
    confirmEdit(row) {
      row.edit = false
      row.percent=row.percent
      console.log('row:'+JSON.stringify(row))
      this.temp = Object.assign({}, row) // copy obj
      this.dialogFormVisible = true
      
      /* this.$nextTick(() => {
          row.percent=this.temp.title
          //console.log(column.label)
          //debugger
         // event.target.children[0].focus()
        })*/
      console.log('id:'+this.temp.id)
      // row.originalTitle = row.title
      // this.$message({
      //   message: 'The title has been edited',
      //   type: 'success'
      // })
    },
    onInputBlur(row){
      row.edit=false
      console.log('haha')
      this.percentInput==true
    },
    handle(row){
  console.log(row.percent);
  this.percentInput=true
    },
     handleClick(row) {
        console.log(row);
      },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("val:" + JSON.stringify(val));

      //console.log(JSON)
    },
    updateData(){
//this.temp = Object.assign({}, row) // copy obj
this.dialogFormVisible = false
 for (const v of this.tableData) {
              if (v.id === this.temp.id) {
                const index = this.list.indexOf(v)
                this.tableData.splice(index, 1, this.temp)
                break
              }
            }
    },
    getlevel(val) {
      console.log("level:" + val);
    }
    // load(tree, treeNode, resolve) {
    //   setTimeout(() => {
    //     resolve([
    //       {
    //         id: 31,
    //         accno: '2016-05-01',
    //         name: '王小虎',
    //         percent: '上海市普陀区金沙江路 1519 弄'
    //       }, {
    //         id: 32,
    //         accno: '2016-05-01',
    //         name: '王小虎',
    //         percent: '上海市普陀区金沙江路 1519 弄'
    //       }
    //     ])
    //   }, 1000)

    // }
  }
};
</script>
